<div class="page-body" id="app">
    <div class="row">
        <div class="col-xs-12 col-md-12">
            <div class="widget">
                <div class="widget-header
            <switch name="T_type">
                <case value="1">bg-magenta</case>
                <case value="2">bg-palegreen</case>
                <case value="3">bg-lightred</case>
                <case value="4">bg-blue</case>
                <case value="5">bg-blueberry</case>
                <case value="6">bg-gold</case>
                <default />bg-magenta
                </switch>
                ">
                <span class="widget-caption">{$T_title|default=CONTROLLER_NAME}</span>
                <!--Widget Buttons-->
            </div>
            <div class="widget-body">
                <div class="table-toolbar">
                    <div class="row">
                        <div class="col-xs-12 col-md-4">
                            <form method="get" action="{:U('index')}" class="form-inline" role="form">
                                <div class="form-group">
                                        <span class="input-icon" style="width: 200px;">
                                            <input type="text" class="form-control input-sm" placeholder="卡号，姓名"
                                                   name="keywords" value="{$Think.get.keywords}">
                                            <i class="glyphicon glyphicon-search blue"></i>
                                        </span>
                                    <div class="input-group">
                                        会员:
                                        <select name="valid">
                                            <option value="0">全部</option>
                                            <option value="1" <eq name="Think.get.valid" value="1">selected=selected</eq> >有效</option>
                                            <option value="2" <eq name="Think.get.valid" value="2">selected=selected</eq> >无效</option>
                                        </select>
                                    </div>
                                    <button class="btn btn-info">搜索</button>
                                </div>
                            </form>

                        </div>
                        <div class="col-xs-3 col-md-3">
                            <span class="label label-info">借阅记录</span>
                            <select class="record_state" v-model="state">
                                <option value="2">全部</option>
                                <option value="1">已归还</option>
                                <option value="0">未归还</option>
                            </select>
                        </div>
                        <a class="btn" @click="exportExcel()">导出当前记录</a>
                        <div class="col-xs-3 col-md-3">
                            <div class="input-group">
                                    <span class="input-group-addon">
                                        <i class="fa fa-calendar"></i>
                                    </span>
                                <datepicker @input="updateIntervalTime"></datepicker>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12 col-md-4">
                        <table class="table table-bordered table-striped table-condensed flip-content">
                            <thead class="flip-content bordered-palegreen">
                            <tr>
                                <th>卡号</th>
                                <th>孩子</th>
                                <th>父亲</th>
                                <th>母亲</th>
                                <th>绑定微信号</th>
                            </tr>
                            </thead>
                            <tbody>
                            <template v-for="item in cards">
                                <column :item="item" :id="cardId" @check="getRecord"></column>
                            </template>
                            </tbody>
                        </table>
                        {$page}<br>
                        <form class="form-inline" method="post">
                            <div class="form-group">
                                <div class="input-group">
                                    <div class="input-group-addon">设置页码</div>
                                    <input class="form-control" type="text" placeholder="" name="p" value="{$Think.get.p}" style="width: 60px;">
                                </div>
                            </div>
                        </form>
                        红色显示为有效会员，灰色为无效会员
                    </div>
                    <div class="col-xs-12 col-md-8">
                        <table class="table table-striped table-hover">
                            <thead class="flip-content bordered-palegreen">
                            <tr>
                                <th>订单号</th>
                                <th>条码</th>
                                <th>书名</th>
                                <th>定价</th>
                                <th>借阅数量</th>
                                <th>归还/破损</th>
                                <th>借阅时间</th>
                                <th>状态</th>
                            </tr>
                            </thead>
                            <tbody class="recordlist">
                            <template v-if="items.length == 0">
                                暂无记录
                            </template>
                            <template v-else>
                                <template v-for="item in items">
                                    <tr>
                                        <td>{{ item.order_id }}</td>
                                        <td>{{ item.tm }}</td>
                                        <td>{{ item.sm }}</td>
                                        <td>{{ item.dj }}</td>
                                        <td>{{ item.quantity }}</td>
                                        <td>{{ item.num_backed }} / {{ item.num_broken}}</td>
                                        <td>{{ item.create_time }}</td>
                                        <td>
                                        <span v-if="item.state_order == 1">
                                            未发货
                                        </span>
                                            <span v-else-if="item.is_backed == 0">
                                            未归还
                                        </span>
                                            <span v-else>
                                            已归还
                                        </span>
                                        </td>
                                    </tr>
                                </template>

                            </template>
                            </tbody>
                            <tfoot  >
                            <tr>
                                <th colspan="2">
                                    共<span class="total">{{ pages }}</span>页，当前第<span class="page">{{ currentPage }}</span>页
                                </th>
                                <th colspan="6">
                                    <select name="" id="" v-model="currentPage">
                                        <option v-for="p in pages" :value="p">
                                            {{ p }}
                                        </option>
                                    </select>
                                </th>
                            </tr>
                            </tfoot>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</div>
<script src="/admin/js/datetime/moment.js"></script>
<script src="/admin/js/datetime/daterangepicker.js"></script>
<script type="text/x-template" id="column">
    <tr @click="getRecord(item.card_id)" :class="{'success': item.card_id == id }">
        <td class="label label-darkorange" :class="{ 'label-default': canUse }">{{ item.card_id }}</td>
        <td>{{ item.child_name }}</td>
        <td>{{ item.father_name }} / {{ item.father_phone }}</td>
        <td>{{ item.mother_name }} / {{ item.mother_phone }}</td>
        <td>
            {{ item.openid ? item.nickname : '未绑定'}}
        </td>
    </tr>
</script>
<script>
    Vue.component('datepicker', {
        template: '\
        <input class="form-control active"\
        ref="input"\
        v-bind:value="value"\
        v-on:input="updateValue($event.target.value)"\
        data-date-format="dd-mm-yyyy"\
        data-date-end-date="0d"\
        type="text"  />\
        ',
        props: {
            value: {
                type: String,
            }
        },
        mounted: function() {
            var self = this;
            this.$nextTick(function() {
                $(this.$el).daterangepicker({
                    format: "YYYY-MM-DD",
                    separator: "~",
                    locale: {
                        applyLabel: '确定',
                        cancelLabel: '取消',
                        fromLabel: '开始时间',
                        toLabel: '结束时间'
                    }
                }, function(start,end) {
                    var daterange = start.format('YYYY-MM-DD') + '~' + end.format('YYYY-MM-DD');
                    self.$emit('input', daterange);
                })
            });
        }
    });
    Vue.component('column', {
        template: '#column',
        props: ['item','id'],
        methods: {
            getRecord: function (cardId) {
                this.$emit('check',{'cardId':cardId});
            },
        },
        computed: {
            canUse: function() {
                return this.item.expire_time < moment().format('YYYY-MM-DD HH:mm:ss');
            }
        }
    })
    new Vue({
        el: '#app',
        data: {
            cardId: 0,
            cards: {$data|json_encode},
            items: [],
            pages: 1,
            currentPage:1,
            state: 2, //分类，2:全部;1:已归还;0:未归还
            intervalTime: ''
        },
        watch: {
            currentPage: function () {
                this.updateselect();
            },
            state: function() {
                this.updateselect();
            },
            intervalTime: function() {
                this.updateselect();
            }
        },
        methods: {
            getRecord: function (item) {
                this.cardId = item.cardId;
                this.currentPage = 1;
                this.updateselect();
            },
            // 更新分页数据
            updateselect: function () {
                var _this = this;
                $.post("{:U('userRent')}", {
                    "card_id": this.cardId,
                    "page":this.currentPage,
                    "is_backed":this.state,
                    "interval_time":this.intervalTime,
                    "valid": {$Think.get.valid|default='0'},
                }, function (response) {
                    _this.items = response.data;
                    _this.pages = response.total;
                    _this.currentPage = response.page;
                })
            },
            updateIntervalTime: function (data) {
                this.intervalTime = data;
            },
            exportExcel: function() {
                window.location.href = "/index/searchCard/export?card_id=" + this.cardId
                    + "&is_backed=" + this.state + "&interval_time=" + this.intervalTime + "&valid={$Think.get.valid}";
            }
        }
    })
</script>